<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    title="抵质押移交清单"
    width="1100px"
    top="30px"
  >
    <slot></slot>
    <table
      class="table table-bordered text-center table-sm table-vertical-middle"
      v-loading="loading"
    >
      <colgroup>
        <col width="4%" />
        <col width="11%" />
        <col width="13%" />
        <col width="13%" />
        <col width="13%" />
        <col width="9%" />
        <col width="8%" />
        <col width="13%" />
        <col width="7%" />
        <col width="10%" />
      </colgroup>
      <thead>
        <tr>
          <th>序号</th>
          <th>抵质押物类型</th>
          <th>抵质押物名称</th>
          <th>抵质押编号</th>
          <th>抵押时间</th>
          <th>评估价格(元)</th>
          <th>提交人</th>
          <th>备注</th>
          <th>附件</th>
          <th>状态</th>
        </tr>
      </thead>
      <tr v-if="!tableData.length">
        <td colspan="10">-</td>
      </tr>
      <tr v-for="(p, index) of tableData" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ enumPledgeType[p.guaranty_type] }}</td>
        <td>{{ p.guaranty_name }}</td>
        <td>{{ p.guaranty_no }}</td>
        <td>{{ p.guarantyDate }}</td>
        <td>{{ p.guaranty_value }}</td>
        <td>{{ p.submit_person_name }}</td>
        <td>{{ p.remark }}</td>
        <td>
          <span v-if="!p.attachment">无</span>
          <el-button v-else size="small" @click="handleAttachView(p)">查看</el-button>
        </td>
        <td>
          <span class="badge" :class="`badge-${enumPledgeDetailStyle[p.item_guaranty_status]}`">
            {{ enumPledgeDetailStatus[p.item_guaranty_status] }}
          </span>
        </td>
      </tr>
    </table>
    <div class="text-center" v-if="!viewMode">
      <el-button type="primary" class="btn-long" :loading="buttonLoading" @click="handleSubmit">
        申请移交
      </el-button>
      <el-button class="btn-long" @click="beforeClose">取消</el-button>
    </div>

    <div class="text-center" v-if="isApprove">
      <el-button type="primary" class="btn-long" :loading="buttonLoading" @click="handleAccept">
        接受移交
      </el-button>
      <el-button class="btn-long" @click="beforeClose">取消</el-button>
    </div>
    <attachment-view :visible.sync="itemAttachVisible" :attach="attach"></attachment-view>
  </el-dialog>
</template>

<script>
import {
  enumPledgeType,
  enumPledgeDetailStatus,
  enumPledgeDetailStyle,
} from '@/credit/views/city/risk/pledge/enum'
import { dateFormat } from '@vimi/utils-tool'
import AttachmentView from '@/credit/views/city/risk/pledge/AttachmentView'
export default {
  components: {
    AttachmentView,
  },
  props: {
    registerId: { type: String, default: '' },
    visible: Boolean,
    viewMode: {
      type: Boolean,
      default: true,
    },
    isApprove: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      enumPledgeType,
      enumPledgeDetailStatus,
      enumPledgeDetailStyle,
      loading: false,
      itemAttachVisible: false,
      attach: '',
      tableData: [],
      masterTableName: 'guaranty_register',
      tableName: 'guaranty_register_detail',
      params: {},
      buttonLoading: false,
    }
  },
  watch: {
    registerId() {
      this.params['guaranty_register_id.eq'] = this.registerId
      this.getData()
    },
  },
  created() {},
  methods: {
    updateData(data) {
      if (!this.registerId) {
        return Promise.reject(new Error(''))
      }
      return this.$api.updateData(this.$serviceName, this.masterTableName, this.registerId, data)
    },
    handleAccept() {
      const data = {
        transfer_status: 2,
        transfer_approval_time: dateFormat(new Date()),
      }
      this.buttonLoading = true
      this.updateData(data)
        .then(() => {
          this.$emit('success', true)
          this.$message.success('接受成功')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('接受失败!')
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },
    handleSubmit() {
      const data = {
        transfer_status: 1,
        transfer_time: dateFormat(new Date()),
      }
      this.buttonLoading = true
      this.updateData(data)
        .then(() => {
          this.$emit('success', true)
          this.$message.success('申请成功')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('申请失败!')
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },
    getData() {
      if (!this.registerId) {
        this.tableData = []
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res?.data ?? []
          this.tableData = data.map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.guarantyDate = dateFormat(item.guaranty_date, 'yyyy年MM月dd日')
      return item
    },
    handleAttachView(row) {
      this.itemAttachVisible = true
      this.attach = row.attachment || ''
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
